<!-- supervision count -->
<template>
<div class="loading-box" v-loading="!countFlag" element-loading-background="rgba(0, 0, 0, 0.1)">
  <div v-if="countFlag" class="supervision-count animate__animated animate__fadeInLeft">
    <div class="sup-top">
      <CountTop :revTitle="'监察情况'"></CountTop>
    </div>
    <div class="sup-main">
      <div class="sup-left">
        <!-- 1/3 -->
        <div class="left-box">
          <div class="left-chart">
            <dv-border-box-2>
              <PublicEcharts
                :option="this.taskData"
                :title="'当月分区域监察任务统计'"
                :id="'taskData1'"
                ref="taskData1"
              ></PublicEcharts>
            </dv-border-box-2>
          </div>
          <div class="left-chart">
            <dv-border-box-2>
              <div class="table-title">
                <span>待签收任务</span>
                <span></span>
              </div>
              <ul>
                <li>
                  <span>监察类型</span>
                  <span>开始时间</span>
                  <span>结束时间</span>
                </li>
                <template v-if="waitList.length > 0">
                  <li v-for="(item, i) in waitList" :key="i">
                    <span>{{item.origin}}</span>
                    <span>{{item.start_time}}</span>
                    <span>{{item.over_time}}</span>
                  </li>
                </template>
              </ul>
            </dv-border-box-2>
          </div>
        </div>
        <!-- 2/3 -->
        <div class="left-box left-big">
            <div class="left-big-box">
                <dv-border-box-2>
                    <ul>
                        <li>
                            <span></span>
                            <span>海州区</span>
                            <span>连云区</span>
                            <span>赣榆区</span>
                            <span>灌云县</span>
                            <span>东海县</span>
                            <span>灌南县</span>
                        </li>
                        <li v-for="(item,i) in 12" :key="i">
                            <span>{{i+1}}月</span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </li>
                    </ul>
                </dv-border-box-2>
            </div>
        </div>
        <!-- 3/3 -->
        <div class="left-box">
          <div class="left-chart">
            <dv-border-box-2>
              <PublicEcharts
                :option="this.personData"
                :title="'监察预警类型统计'"
                :id="'personData1'"
                ref="personData1"
              ></PublicEcharts>
            </dv-border-box-2>
          </div>
          <div class="left-chart">
            <dv-border-box-2>
              <div class="table-title">
                <span>当月完成任务</span>
                <span></span>
              </div>
              <ul>
                <li>
                  <span>监察类型</span>
                  <span>开始时间</span>
                  <span>结束时间</span>
                </li>
                <template v-if="monDoneList.length > 0">
                  <li v-for="(item, i) in monDoneList" :key="i">
                    <span>{{item.name}}</span>
                    <span>{{item.start_time}}</span>
                    <span>{{item.over_time}}</span>
                  </li>
                </template>
              </ul>
            </dv-border-box-2>
          </div>
        </div>
      </div>
      <div class="sup-right">
          <div class="right-big">
              <dv-border-box-2>
                    <PublicEcharts
                    :option="this.yearData"
                    :title="'年度监察情况'"
                    :id="'yearData1'"
                    ref="yearData1"
                    ></PublicEcharts>
              </dv-border-box-2>
          </div>
          <div class="right-small">
              <dv-border-box-2>
                  <PublicEcharts
                    :option="this.typeData"
                    :title="'年度监察类型占比'"
                    :id="'typeData1'"
                    ref="typeData1"
                    ></PublicEcharts>
              </dv-border-box-2>
          </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import CountTop from "../components/container/CountTop";
import PublicEcharts from "../components/charts/PublicEcharts";
import {
  pieSuper,
  barHoriSuper,
  lineSuper,
} from "../utils/chartOption/supervisionCountOption";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { CountTop, PublicEcharts },

  //父组件传入子组件数据
  props: {},

  //格式化数据
  filters: {},

  data() {
    //这里存放数据
    return {
      countFlag: false,
      taskData: barHoriSuper(),   // 当月分区域...
      personData: barHoriSuper(), // 右上...
      typeData: pieSuper(),       // 年度监察类型...
      yearData: lineSuper(),      // 年度监察情况...
      waitList: [],               // 代签收任务
      monDoneList: [],            // 当月完成任务
    };
  },

  //计算属性 类似于data概念
  computed: {},

  //监控data中的数据变化
  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.init()
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},

  //方法集合
  methods: {
    async init() {
      
      let ret  = await this.$http.getJcqk()
      if (ret.data.errorCode != 0) {
        that.$message({
          showClose: true,
          message: "系统忙！",
          type: "error",
        });
        return;
      }
      let data = ret.data.data
      console.log(data);
      // 当月分区域...
      let arr1 = this.formatArr(data.areaPlanChar)
      this.taskData = barHoriSuper(arr1)
      // 年度监察情况
      let arr2 = this.formatArr(data.ndjcqkChar)
      this.yearData = lineSuper(arr2)
      // 监察预警类型统计
      let arr3 = this.formatArr(data.monTypeChar)
      this.personData = pieSuper(arr3)
      // 年度监察类型占比
      let arr4 = this.formatArr(data.yearJcTypeChar)
      this.typeData = pieSuper(arr4)
      // 代签/当月任务
      this.waitList = data.waitQsChar
      this.monDoneList = data.monDoneChar



      // 解锁 -----------------------------------
      this.countFlag = true;
    },

    formatArr(data) {
      let arr = { types: [], data: [] };
      data.forEach((ele) => {
        arr.types.push(ele.name);
        arr.data.push(ele.total);
      });
      return arr;
    },
  },
};
</script>

<style scoped lang='less'>
/* 使用$符号可以标识一个变量;@import url(); 引入公共css类 */
.loading-box {
    width: 100%;
    height: 100%;
}
.supervision-count {
  width: 100%;
  height: 100%;
  animation-duration: 0.4s;
  .sup-top {
    width: 100%;
    height: 10%;
  }
  .sup-main {
    width: 100%;
    height: 90%;
    // display: flex;
    .sup-left {
      width: 100%;
      height: 67%;
      box-sizing: border-box;
      display: flex;
      .left-box {
        width: 26%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        .left-chart {
          width: 98%;
          height: 48%;
          .table-title {
            width: 100%;
            height: 15%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.2rem;
            color: @FontColor;
            font-weight: 700;
          }
          ul {
            width: 96%;
            height: 80%;
            margin: 0 auto;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            li {
              // flex: 1;
              width: 100%;
              height: 20%;
              background-color: @ListTrBgColor;
              color: @ListHeadBgColor;
              display: flex;
              span {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.18rem;
                box-sizing: border-box;
                border: 1px solid #ccc;
              }
            }
            li:first-child {
              background-color: @ListHeadBgColor;
              color: @ListTrBgColor;
            }
          }
        }
      }
      .left-box.left-big {
        width: 48%;
        .left-big-box {
            width: 98%;
            height: 97%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            ul {
            width: 96%;
            height: 95%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            li {
              flex: 1;
              background-color: @ListTrBgColor;
              color: @ListHeadBgColor;
              display: flex;
              span {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.18rem;
                box-sizing: border-box;
                border: 1px solid #ccc;
              }
            }
            li:first-child {
              background-color: @ListHeadBgColor;
              color: @ListTrBgColor;
            }
          }
        }
      }
    }
    .sup-right {
      width: 100%;
      height: 33%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.26%;
      box-sizing: border-box;
      .right-big {
          width: 73.53%;
          height: 98%;
          box-sizing: border-box;
      }
      .right-small {
          width: 25.52%;
          height: 98%;
          box-sizing: border-box;
      }
    }
  }
}
</style>